<template>
    <div>
        <ul class="tab">
            <li v-for="(item,index) in tabList" :key="index" @click="tabIndex = index" :class="{'li-active' : index == tabIndex }">{{item}}</li>
        </ul>

        <template v-if="tabIndex == 0">
            <el-form label-position="right" label-width="80px">
                <el-form-item label="模块背景">
                    <SetBackground :base="attributes.base"/>
                </el-form-item>
                <el-form-item label="技术支持">
                    <el-radio-group v-model="attributes.support">
                        <el-radio :label="true">显示</el-radio>
                        <el-radio :label="false">隐藏</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
        </template>
        
        <template v-if="tabIndex == 1">
            <el-form label-position="right" label-width="80px">
                <el-form-item label="模块间隙">
                    <el-radio-group v-model="attributes.mb.is" @change="changeMb">
                        <el-radio :label="false">默认</el-radio>
                        <el-radio :label="true">自定义</el-radio>
                    </el-radio-group>
                    <div class="slider" v-if="attributes.mb.is">
                        <el-slider v-model="attributes.mb.num" :max="24"></el-slider>
                        <b>{{attributes.mb.num}}px</b>
                    </div>
                </el-form-item>
                <el-form-item label="两侧边距">
                    <el-radio-group v-model="attributes.pd.is">
                        <el-radio :label="false">默认</el-radio>
                        <el-radio :label="true">自定义</el-radio>
                    </el-radio-group>
                    <div class="slider" v-if="attributes.pd.is">
                        <el-slider v-model="attributes.pd.ln" :max="40"></el-slider>
                        <b>左侧间距：{{attributes.pd.ln}}px</b>
                    </div>
                    <div class="slider" v-if="attributes.pd.is">
                        <el-slider v-model="attributes.pd.rn" :max="40"></el-slider>
                        <b>右侧间距：{{attributes.pd.rn}}px</b>
                    </div>
                </el-form-item>
            </el-form>
        </template>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            tabList:['配色风格','模块风格'],
            tabIndex: 0,
        }
    },
    computed:{
		...mapState(['attributes', 'diyModule'])
    },
    methods: {
        changeMb(e){
            this.diyModule.forEach(item => {
                item.base.m = !e
            });
        }
    },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/attr.scss';

.attr-part{
    .title{height: 40px;border-bottom: 1px solid #eee;padding: 0 10px;box-sizing: border-box;font-size: 14px;color: #666;cursor: pointer;user-select: none;
        .icon-group{.el-button{margin: 0;transform: scale(.8)}}
    }
    /deep/  .el-form-item__label{font-size: 13px}
    .part-upload{font-size: 13px;color: #666}
}
.add_page{width: 329px;margin: 20px auto;}

/deep/ .el-textarea{width: 280px;}

</style>
